<template>
  <div class="SAExpDesign_content">
    <div class="SAContentBox">
      <div class="title">
        <i class="far fa-file-alt"></i>
        <p>加载参数文件</p>
      </div>
      <div class="content">
        <div class="loadContent">
          <el-upload
            class="upload-demo"
            drag
            action="http://localhost:8181/uploadSAParRang"
            multiple
            name="multipartFile"
            :on-success="uploadResponse"
            :data="postParamdata"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <!-- <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过500kb
            </div> -->
          </el-upload>
        </div>
        <div class="fileView">
          <el-input type="textarea" :rows="2" placeholder="" v-model="textarea">
          </el-input>
        </div>
      </div>
    </div>
    <div class="SAContentBox">
      <div class="title">
        <i class="fas fa-edit"></i>
        <p>参数采样</p>
      </div>
      <div class="content1">
        <div class="input_content">
          <div class="input-item">
            <!-- <span>参数名称</span> -->
            <p>采样方法:</p>
            <el-input placeholder="" v-model="currentSampleMethods">
              <el-dropdown slot="suffix" @command="handleCommand">
                <i class="el-icon-arrow-down el-icon--right"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-for="(item, index) in sampleMethods"
                    :key="index"
                    :command="index"
                    >{{ item.name }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </el-input>
          </div>
          <div class="input-item">
            <!-- <span>参数名称</span> -->
            <p>采样个数:</p>
            <el-input
              :placeholder="limt_N"
              v-model="D"
              clearable
              class="input-box"
              type="number"
            ></el-input>
          </div>
        </div>

        <div class="btn_group">
          <el-button class="sa-btn" size="medium" @click="SA_Sample">
            生成样本
          </el-button>

          <el-button class="sa-btn" size="medium" @click="SA_Save">
            保存
          </el-button>
        </div>
        <div class="fileView">
          <el-input
            type="textarea"
            :rows="6"
            placeholder=""
            v-model="sampleData"
          >
          </el-input>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      textarea: "",
      postParamdata: {
        type: "paramRange",
      },
      sampleMethods: [
        { name: "monte_carlo", limt: "取值必须为参数个数的倍数" },
        { name: "lhs", limt: "取值必须为参数个数的倍数" },
        { name: "symmetric_LH", limt: "取值必须为参数个数的倍数" },
        { name: "morris_oat", limt: "取值必须为参数个数的倍数" },
        { name: "saltelli", limt: "取值必须为参数个数的倍数" },
        { name: "fast_sampler", limt: "取值必须为参数个数的倍数" },
      ],
      currentSampleMethods: "",
      N: null, //采样数量
      D: null, //参数个数
      limt_N: "",
      sampleData: "",
      downloadURL:
        "E:working/HHU_NNU/Program/UQ-pyL/UQ/Data/paramSample_xaj.txt",
    };
  },
  methods: {
    uploadResponse(response, file, fileList) {
      console.log(response);
      this.textarea = response.content;
      this.D = response.count;
      // console.log(response);
    },
    handleCommand(command) {
      this.currentSampleMethods = this.sampleMethods[command].name;
      this.limt_N = this.sampleMethods[command].limt;
      // this.$message("click on item " + command);
    },
    SA_Sample() {
      const _this = this;
      axios.get("http://localhost:8181/getSASample").then((resp) => {
        _this.sampleData = resp.data;
      });
    },
    SA_Save() {
      let url =
        "http://localhost:8181/                                                                                                                                                         .txt";
      let fileName = "paramSample_xaj";
      fetch(url, {
        headers: new Headers({
          Origin: location.origin,
        }),
        mode: "cors",
      })
        .then((response) => response.blob())
        .then((blob) => {
          let blobUrl = window.URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.download = fileName;
          a.href = blobUrl;
          document.body.appendChild(a);
          a.click();
          a.remove();
        })
        .catch((e) => console.error(e));
    },
  },
};
</script>
<style>
.SAExpDesign_content {
  width: 680px;
  display: flex;
  flex-direction: column;
  height: fit-content;
  padding: 10px 25px 10px 25px;
  box-sizing: border-box;
}
.SAContentBox {
  height: 100%;
  width: 100%;
  /* background-color: white; */
  border: 1px solid rgba(20, 121, 215);
  border-radius: 4px;
  margin-bottom: 20px;
  margin-top: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.SAContentBox .title {
  font-size: 16px;
  /* background: #000; */
  padding: 5px 10px;
  color: rgb(76, 118, 199);
  background-color: rgb(237, 239, 239);
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;
  left: 5px;
  top: -14px;
}
.SAContentBox .title i {
  margin-right: 5px;
}
.SAContentBox .content {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  justify-content: center;
  padding: 20px 10px 10px 10px;
}

.SAContentBox .content1 {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  justify-content: center;
  padding: 20px 10px 10px 10px;
}
.SAContentBox .content1 .input_content {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
}
.SAContentBox .content .loadContent {
  height: fit-content;
}
.SAContentBox .content .fileView {
  height: fit-content;
  margin-left: 20px;
}
.SAContentBox .content .fileView .el-textarea__inner {
  height: 180px;
}
.SAContentBox .content1 .input-item {
  /* background-color: red; */
  width: 520px;
  height: fit-content;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 5px 0 5px;
  /* margin-left: 16px;
  margin-bottom: 10px; */
}
.SAContentBox .content1 .input-item p {
  margin-right: 10px;
  width: 85px;
  text-align: right;
  /* font-weight: bold; */
}

.SAContentBox .content1 .input-item .el-input__inner {
  height: 36px;
  line-height: 36px;
  /* font-weight: bold; */
}
.SAContentBox .content1 .input-item .el-dropdown {
  height: 100%;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  cursor: pointer;
  margin-right: 10px;
}
.SAContentBox .content1 .btn_group {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.SAContentBox .content1 .btn_group .sa-btn {
  background-color: rgb(20, 121, 215);
  color: white;
  margin-right: 5px;
}
.SAContentBox .content1 .fileView {
  width: 100%;
}
</style>